<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryParams" :inline="true">
      <el-form-item label="方案名称" prop="planName">
        <el-input
          v-model="queryParams.planName"
          placeholder="请输入方案名称"
          clearable
          size="small"
          style="width: 240px"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置</el-button
        >
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          >新增</el-button
        >
      </el-col>
    </el-row>


    <el-table
      v-loading="loading"
      :data="dataList"
    >      
      <!-- <el-table-column type="selection" width="55" align="center" /> -->
      <!-- <el-table-column type="index" :index="table_index" label="序号" align="center"/> -->
      <el-table-column label="方案编号" prop="id" align="center"/>
      <el-table-column label="方案名称" prop="planName" align="center"/>
      <el-table-column label="考评指标" prop="indicators" align="center" v-if="false"/>
      <el-table-column label="状态" prop="state" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.state == '0'">未应用</span>
          <span v-else-if="scope.row.state == '1'">应用中</span>
        </template>
      </el-table-column>
      <el-table-column label="备注" prop="remark" align="center" show-overflow-tooltip/>
      <el-table-column label="创建时间" align="center" prop="createTime" >
        <template slot-scope="scope">
          <span v-if="scope.row.createTime">{{ parseTime(scope.row.createTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="修改时间" align="center" prop="modifyTime" >
        <template slot-scope="scope">
            <span v-if="scope.row.modifyTime">{{ parseTime(scope.row.modifyTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" >
        <template slot-scope="scope">
            <el-button
              size="mini"
              circle type="success"
              icon="el-icon-edit"
              @click="handleUpdate(scope.row)"
            />
          <span v-if="scope.row.state != '1'">

              <el-button
                size="mini"
                circle type="danger"
                icon="el-icon-delete"
                @click="handleDelete(scope.row)"
              />
          </span>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <el-dialog
        :title="title"
        :visible.sync="open"
        width="50%"
        :before-close="handleClose"
    >
      <el-form
        :model="form"
        ref="form"
        :rules="rules"
        label-width="20px"
      >
        <el-form-item label="id" prop="id" v-if="false">
          <el-input v-model="form.id"></el-input
        ></el-form-item>
        <el-form-item label="方案名称" prop="planName" label-width="100px">
          <el-input
            style="width: 100%"
            v-model="form.planName"
            placeholder="请输入方案名称"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="考评指标" prop="indicators" label-width="100px">
            <!-- <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox> -->
            <!-- <div style="margin: 15px 0;"></div> @change="handleCheckedChange" -->
            <el-checkbox-group v-model="form.indicators">
                <el-checkbox 
                    v-for="indicator in indicatorOption" 
                    :label="indicator.id+''" 
                    :key="indicator.id">{{indicator.indicatorName}}
                </el-checkbox>
            </el-checkbox-group>
        </el-form-item >
        <el-form-item label="备注" prop="remark" label-width="100px">
            <el-input
                style="width: 100%"
                v-model="form.remark"
                type="textarea"
            >    
            </el-input>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">提 交</el-button>
        <el-button @click="handleClose">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>

import { findFirstLevelIndicator} from "@/api/stu/evaluation/indicator";
import { findStuEvaPlanPageList,createStuEvaPlan,deleteStuEvaPlanById} from "@/api/stu/evaluation/plan";


export default {
    name: "plan",
    data(){
        return{
            // 遮罩层
            loading: true,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 总条数
            total: 0,
            // 表格数据
            dataList: [],
            // 弹出层标题
            title: "",
            // 是否显示弹出层
            open: false,
            //查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
            }, 
            // 表单参数
            form: {
                id:undefined,
                planName:undefined,
                indicators:[],
                remark:undefined
            },
            rules:{
                planName:[{ required: true, message: '方案名称不能为空',trigger:"blur"}], 
                indicators:[{ required: true, message: '考评指标必选',trigger:"change"}],
            },
            //多选框
            indicatorOption:[],
            checkAll: false,
            isIndeterminate: true
        }
    },
    created() {
        this.getIndicators();
        this.getList();
    },
    methods:{
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },

        /** 重置查询 */
        resetQuery() {
            this.resetForm("queryParams");
            this.handleQuery();
        },
        /** 关闭弹窗 */
        handleClose(done) {
          this.reset();
          this.open = false
        },
        /** 重置表单 */
        reset() {
          this.form = {
            id:undefined,
            planName:undefined,
            indicators:[],
            remark:undefined
          };
          //清楚上次的表单校验
          this.$nextTick(() =>{
              this.$refs["form"].clearValidate()
          })
        },
        handleAdd(){
            this.open = true;
        },
        handleUpdate(row){
          this.reset();
          this.open = true;
          this.title = "修改"
          this.form.id = row.id
          this.form.planName = row.planName
          this.form.indicators = row.indicators.split(',')
          this.form.remark = row.remark
          // console.log(this.form)
          // console.log(this.form.indicators)
        },
        handleDelete(row){
          this.$confirm("是否确认删除数据项?", "警告", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          })
            .then(function() {
              return deleteStuEvaPlanById(row.id);
            })
            .then(() => {
              this.getList();
              this.msgSuccess("删除成功");
            })
            .catch(function() {});
        },
        //获取考评指标
        getIndicators(){
          findFirstLevelIndicator().then(resp => {
            this.indicatorOption = resp.data
          })
        },
        handleCheckAllChange(val) {
          var temp = []
          for(var i = 0; i < this.indicatorOption.length; i++){
            temp.push(this.indicatorOption[i].id)
          }
          this.form.indicators = val ? temp : [];
          this.isIndeterminate = false;
        },
        handleCheckedChange(value) {
          let checkedCount = value.length;
          this.checkAll = checkedCount === this.indicatorOption.length;
          this.isIndeterminate = checkedCount > 0 && checkedCount < this.indicatorOption.length;
        },
        getList(){
          findStuEvaPlanPageList(this.queryParams).then(resp =>{
              this.dataList = resp.data.list
              this.total = resp.data.total
              this.loading = false
          })   
        },
        submitForm:function(){
            this.$refs["form"].validate(vaild =>{
              if(vaild){
                var stringIndicators = this.form.indicators.join(",")

                let obj = {id:this.form.id,"planName":this.form.planName,"indicators":stringIndicators,
                            "remark":this.form.remark,"state":this.form.state}

                createStuEvaPlan(obj).then(resp => {
                  if(resp.code === 200){
                      this.$message({ message: "操作成功", type: "success" });
                      this.open = false;
                      this.getList();
                  }else{
                      this.$message({ message: "操作失败", type: "error" });
                  }                         
                })

              }
            })
        }
    }
}
</script>

<style>

</style>